<template>
    <div class="image" id="bigImage">
      <div id="ReplaydragbarImage" class="ReplaydragbarImage"></div>
      <div class="actionIcon rotate" v-show="dragbarShow" @click.stop="rotateFun()">
        <i class="iconfont icon-xuanzhuan1"></i>
      </div>
      <div class="actionIcon minimg" v-show="!smallMode && dragbarShow" @click.stop="small">
        <i class="iconfont icon-zuixiaohua"></i>
      </div>
      <div class="actionIcon minimg" v-show="smallMode && dragbarShow" @click.stop="maxMode">
        <i class="iconfont icon-zuidahua"></i>
      </div>
      <div class="actionIcon closeimg" v-show="dragbarShow" @click.stop="closeBigImage">
        <i class="iconfont icon-qiapianshangdeguanbi"></i>
      </div>

      <div class="imgBox" id="bigImgBox" :style="!smallMode ? 'max-width: calc(100vw - 200px);' : ''">
        <!-- <div class="arrow" id="leftArrow" @click="turnLeft"></div>
        <div class="arrow" id="rightArrow" @click="turnRight"></div>
        <img :src="bigImgUrlShow + '?imageView2/2/w/10000'" alt="" ref="imgheigth" id="bigImgBoxImg" @load="getImgFun()"/> -->
        <image-viewer :on-close="closeBigImage" :url-list="imageUrls"/>
      </div>
      <!-- <div class="turnLeft" :class="!turnLeftClick ? 'disable': ''" @click="turnLeft">
        <i class="iconfont icon-zuojiantou "></i>
      </div>
      <div class="turnRight" :class="!turnRightClick ? 'disable': ''" @click="turnRight">
        <i class=" iconfont icon-youjiantou "></i>
        <popover-novice
          style="position: absolute;right: -6px;bottom: -6px;"
          v-if="!getNoviceKeyStatus.webchat_imageTurnPage"
          noviceKey = 'webchat_imageTurnPage'
          :noviceHtml = "{title: '', text: $t('public.webchat_imageTurnPage')}"
          @updateGuidanceSuccess="updateGuidanceSuccess"></popover-novice>
      </div> -->
    </div>
</template>
<script>
  import bus from '@/store/eventBus'
  import imageViewer from '@/components/ui-modules/image/src/image-viewer'
  let imgWidth, imgHeight
  window.onresize = function () {
    imgWidth = document.body.clientWidth
    imgHeight = document.body.clientHeight
  }
  import popoverNovice from '@/components/public-modules/novice-boot/popoverNovice.vue'
  export default {
    name: 'PopDragBigImage',
    components: {
      popoverNovice,
      imageViewer
    },
    data () {
      return {
        params: {
          left: 0,
          top: 0,
          currentX: 0,
          currentY: 0,
          flag: false
        },
        imageShow: false,
        imageUrls: [],
        dragbarShow: false, // 是否展示拖拽条
        smallMode: true,  // 是否处于小图状态
        bigImgUrlShow: '',  // 展示的链接
        rotateDeg: 0, // 旋转角度
        getNoviceKeyStatus: {}   // 新手引导的展示状态
      }
    },
    props: {
      bigImgUrl: String  // 大图链接
    },
    computed: {
      // 左侧切换按钮是否可点击
      turnLeftClick () {
        let array = this.imageUrls || []
        // 当前大图链接存在于当前数组且是第一条时，右侧翻页不可点 或者连接不存在当前列表（说明已切换会话）
        if (array.indexOf(this.bigImgUrlShow) === -1 || array.indexOf(this.bigImgUrlShow) === 0) {
          return false
        } else {
          return true
        }
      },
      // 右侧翻页按钮是否可点击
      turnRightClick () {
        let array = this.imageUrls || []
        // 当前大图链接存在于当前数组且是最后一条时，右侧翻页不可点 或者连接不存在当前列表（说明已切换会话）
        if (array.indexOf(this.bigImgUrlShow) === -1 || (array.indexOf(this.bigImgUrlShow) === (array.length - 1) && array.length > 0)) {
          return false
        } else {
          return true
        }
      }
    },
    methods: {
      // 更新新手引导展示状态
      updateGuidanceSuccess (status) {
        let guidance = this.$getCache('guidance')
        this.getNoviceKeyStatus = guidance || {'webchat_imageTurnPage': true} // 服务不对，或者是没有这个对象时，默认不显示。webchatSessionLocking为气泡的key
      },
      // 左侧翻页 取前一条
      turnLeft () {
        if (this.imageUrls && this.imageUrls.length > 0) {
          let index = this.imageUrls.indexOf(this.bigImgUrlShow)
          if (this.bigImgUrlShow && index > 0) {
            this.bigImgUrlShow = this.imageUrls[index - 1]
            this.rotateDeg = 0
            let container = document.getElementById('bigImgBoxImg')
            container.style.transform = 'rotate(360deg)' // 旋转重置
            container.style.top = '0px'
            container.style.left = '0px'
            // 判断当前大图还是小图模式，重置一下位置
            if (this.smallMode) {
              this.small()
            } else {
              this.maxMode()
            }
          }
        }
      },
      // 右侧翻页 取后一条
      turnRight () {
        if (this.imageUrls && this.imageUrls.length > 0) {
          let index = this.imageUrls.indexOf(this.bigImgUrlShow)
          if (this.bigImgUrlShow && index < this.imageUrls.length - 1) {
            this.bigImgUrlShow = this.imageUrls[index + 1]
            let container = document.getElementById('bigImgBoxImg')
            container.style.transform = 'rotate(360deg)' // 旋转重置
            container.style.top = '0px'
            container.style.left = '0px'
            this.rotateDeg = 0
           // 判断当前大图还是小图模式，重置一下位置
            if (this.smallMode) {
              this.small()
            } else {
              this.maxMode()
            }
          }
        }
      },
      // 最小化
      small () {
        this.smallMode = true
        let container = document.getElementById('bigImage')
        // 先隐藏
        container.style.opacity = '0'
        container.style.left = '0'
        container.style.top = '0'
        let self = this
        window.setTimeout(() => {
          let box = document.getElementById('bigImgBox')
          let container = document.getElementById('bigImage')
          let imgBox = document.getElementById('bigImgBoxImg')
          let imgRotateDeg = imgBox.style.transform // 图片角度
          if (imgRotateDeg.indexOf('90') > -1 || imgRotateDeg.indexOf('270') > -1) { // 当角度90|| 270度时为定位到图片当前的位置
            imgBox.style.top = self.getPosTop() + 'px'
            if (self.getPosTop() < 0) {
              imgBox.style.left = -self.getPosTop() + 'px'
            }
            this.getImgFun('width')
          } else {
            imgBox.style.top = '0px'
            if (self.getPosTop() < 0) {
              imgBox.style.left = '0px'
            }
            this.getImgFun()
          }
          let width = document.body.clientWidth
          let height = document.body.clientHeight
          container.style.left = (width - box.clientWidth) / 2 + 'px'
          if (((height - container.clientHeight) / 2) > 0) {
            container.style.top = (height - container.clientHeight) / 2 + 'px'
          } else {
            container.style.top = '20px'
          }
          container.style.opacity = '1'
        }, 0)
      },
      // 放大图片
      maxMode () {
        this.smallMode = false
        let container = document.getElementById('bigImage')
        container.style.opacity = '0'
        container.style.left = '0'
        container.style.top = '0'
        let self = this
        window.setTimeout(() => {
          let container = document.getElementById('bigImage')
          let imgBox = document.getElementById('bigImgBoxImg')
          let imgRotateDeg = imgBox.style.transform // 图片角度
          if (imgRotateDeg.indexOf('90') > -1 || imgRotateDeg.indexOf('270') > -1) { // 当角度90|| 270度时为定位到图片当前的位置
            imgBox.style.top = self.getPosTop() + 'px'
            if (self.getPosTop() < 0) {
              imgBox.style.left = -self.getPosTop() + 'px'
            }
            this.getImgFun('width')
          } else {
            imgBox.style.top = '0px'
            if (self.getPosTop() < 0) {
              imgBox.style.left = '0px'
            }
            this.getImgFun()
          }
          let width = document.body.clientWidth
          let height = document.body.clientHeight
          container.style.left = (width - container.clientWidth) / 2 + 'px'
          if (((height - container.clientHeight) / 2) > 0) {
            container.style.top = (height - container.clientHeight) / 2 + 'px'
          } else {
            container.style.top = '20px'
          }
          container.style.opacity = '1'
//          dragBar.style.height = box.clientHeight + 'px'
        }, 0)
      },
      rotateFun () { // 图片旋转
        let container = document.getElementById('bigImgBoxImg')
        let imgBox = document.getElementById('bigImage')
        imgBox.style.opacity = '0'
        if (this.rotateDeg === 0) {
          container.style.transform = 'rotate(90deg)'
          container.style.top = this.getPosTop() + 'px'
          if (this.getPosTop() < 0) {
            container.style.left = -this.getPosTop() + 'px'
          }
          this.getImgFun('width')
          this.rotateDeg++
        } else if (this.rotateDeg === 1) {
          container.style.transform = 'rotate(180deg)'
          container.style.top = '0px'
          if (this.getPosTop() < 0) {
            container.style.left = '0px'
          }
          this.getImgFun()
          this.rotateDeg++
        } else if (this.rotateDeg === 2) {
          container.style.transform = 'rotate(270deg)'
          container.style.top = this.getPosTop() + 'px'
          if (this.getPosTop() < 0) {
            container.style.left = -this.getPosTop() + 'px'
          }
          this.getImgFun('width')
          this.rotateDeg++
        } else if (this.rotateDeg === 3) {
          container.style.transform = 'rotate(360deg)'
          container.style.top = '0px'
          if (this.getPosTop() < 0) {
            container.style.left = '0px'
          }
          this.getImgFun()
          this.rotateDeg = 0
        }
        window.setTimeout(() => {
          imgBox.style.opacity = '1'
        }, 0)
      },
      closeBigImage () {
        this.$emit('closeBigImage')
      },
      getPosTop () { // 获取图片定位的位置
        let imgHeight = this.$refs.imgheigth.height // 图片高度
        let imgWidth = this.$refs.imgheigth.width // 图片宽度
        return (imgWidth - imgHeight) / 2
      },
      getCss (o, key) {
        return o[key]
      },
      // 拖拽初始化
      startDrag (bar, target, self, callback) {
        bar.onmousedown = function (event) {
          event.preventDefault()
          if (self.getCss(target, 'offsetLeft') !== 'auto') {
            self.params.left = self.getCss(target, 'offsetLeft')
          }
          if (self.getCss(target, 'offsetTop') !== 'auto') {
            self.params.top = self.getCss(target, 'offsetTop')
          }
          self.params.flag = true
          if (!event) {
            event = window.event
            bar.onselectstart = function () {
              return false
            }
          }
          let e = event
          self.params.currentX = e.clientX
          self.params.currentY = e.clientY < 0 ? 0 : e.clientY
          self.mouseMove(target, callback, self)
        }
        target.onmouseup = function () {
          self.params.flag = false
          if (self.getCss(target, 'offsetLeft') !== 'auto') {
            self.params.left = self.getCss(target, 'offsetLeft')
          }
          if (self.getCss(target, 'offsetTop') !== 'auto') {
            self.params.top = self.getCss(target, 'offsetTop')
          }
          document.onmousemove = null
        }
        document.onmousemove = function (event) {
          let e = window.event
          let nowX = e.clientX
          let nowY = e.clientY
          let disX = 0
          let disY = 0
          if (self.params.flag) {
            let boxWidth = document.getElementById('bigImage').clientWidth
            disX = nowX - self.params.currentX
            disY = nowY - self.params.currentY
            // 判断上下左右的极限位置
            let limitLeft = (parseInt(self.params.left) + disX) > (imgWidth - boxWidth - 2) ? (imgWidth - boxWidth - 2) : (parseInt(self.params.left) + disX) < (100 - self.dragWidth) ? 100 - self.dragWidth : parseInt(self.params.left) + disX
            let limitTop = (parseInt(self.params.top) + disY) > (imgHeight - 34) ? (imgHeight - 34) : (parseInt(self.params.top) + disY) < 0 ? 0 : parseInt(self.params.top) + disY
            if (limitLeft + boxWidth + 10 < document.body.clientWidth) {
              target.style.left = limitLeft + 'px'
              target.style.top = limitTop + 'px'
            }
          }
          if (typeof callback === 'function') {
            callback(parseInt(self.params.left) + disX, parseInt(self.params.top) + disY)
          }
        }
      },
      mouseMove (target) {
        let self = this
        document.onmousemove = function (event) {
          let e = window.event
          let nowX = e.clientX
          let nowY = e.clientY
          let disX = 0
          let disY = 0
          if (self.params.flag) {
            let boxWidth = document.getElementById('bigImage').clientWidth
            disX = nowX - self.params.currentX
            disY = nowY - self.params.currentY
            // 判断上下左右的极限位置
            let limitLeft = (parseInt(self.params.left) + disX) > (imgWidth - boxWidth - 2) ? (imgWidth - boxWidth - 2) : (parseInt(self.params.left) + disX) < (100 - self.dragWidth) ? 100 - self.dragWidth : parseInt(self.params.left) + disX
            let limitTop = (parseInt(self.params.top) + disY) > (imgHeight - 34) ? (imgHeight - 34) : (parseInt(self.params.top) + disY) < 0 ? 0 : parseInt(self.params.top) + disY
            if (limitLeft + boxWidth + 10 < document.body.clientWidth) {
              target.style.left = limitLeft + 'px'
              target.style.top = limitTop + 'px'
            }
          }
        }
      },
      dragBarOver () {
        let self = this
        let oContent = document.getElementById('bigImage')
        oContent.onmouseover = function () {
          self.dragbarShow = true
        }
        oContent.onmouseout = function () {
          self.dragbarShow = false
        }
      },
      //  按键盘上的Esc键时  下拉框隐藏
      domKeydown (event) {
        if (event.keyCode === 27) {
          event.preventDefault()
          this.closeBigImage()
        }
        // 左键翻页
        if (event.keyCode === 37) {
          event.preventDefault()
          this.turnLeft()
        }
        // 右键翻页
        if (event.keyCode === 39) {
          event.preventDefault()
          this.turnRight()
        }
      },
      getImgFun (flag) { // 获取图片高度
        let imgBoxHeigth
        if (flag) {
          imgBoxHeigth = this.$refs.imgheigth.width
        } else {
          imgBoxHeigth = this.$refs.imgheigth.height
        }
        let arrorPane = document.getElementsByClassName('arrow')
        for (var i = 0; i < arrorPane.length; i++) {
          arrorPane[i].style.height = imgBoxHeigth + 'px'
        }
      },
      // mousedownFun (event) { // 鼠标点击事件 此方法是为了当点击鼠标右键时用户可以复制图片
      //   if ((event.which === 3 || event.which === 2) && document.getElementById('bigImgBoxImg')) { // 当鼠标右键点击时
      //     document.getElementById('bigImgBoxImg').style.position = 'relative'
      //     document.getElementById('bigImgBoxImg').style.zIndex = '3'
      //   } else {
      //     document.getElementById('bigImgBoxImg').style.position = 'relative'
      //     document.getElementById('bigImgBoxImg').style.zIndex = '0'
      //   }
      // },
      boxScroll () { // 给图片外面盒子添加滚动条事件解决鼠标左右箭头问题
        let imgBox = document.getElementById('bigImgBox')
        let arrowRight = document.getElementById('rightArrow')
        let arrowLeft = document.getElementById('leftArrow')
        arrowRight.style.transform = 'translateX(' + imgBox.scrollLeft + 'px)'
        arrowLeft.style.transform = 'translateX(' + imgBox.scrollLeft + 'px)'
      }
    },
    beforeMount () {
      this.updateGuidanceSuccess()
    },
    mounted () {
      console.log(this.imageUrls)
      this.bigImgUrlShow = this.bigImgUrl
      let oContent = document.getElementById('bigImage')
      let oBar = document.getElementById('ReplaydragbarImage')
      let imgBox = document.getElementById('bigImgBox')
      this.startDrag(oBar, oContent, this)
      this.dragBarOver()
      document.addEventListener('keydown', this.domKeydown)
      // document.addEventListener('mousedown', this.mousedownFun)
      imgBox.addEventListener('scroll', this.boxScroll)
      this.dragWidth = oContent.clientWidth
      this.dragHeight = oContent.clientHeight
      imgWidth = document.body.clientWidth
      imgHeight = document.body.clientHeight
      bus.$on('webchatShowBigImageData', (msg) => {
        console.log(msg)
        this.bigImgUrlShow = msg.url
        this.imageUrls = msg.list
        this.$nextTick(() => {
          this.imageShow = true
        })
      })
    },
    beforeDestroy () {
      let imgBox = document.getElementById('bigImgBox')
      bus.$off('webchatShowBigImageData')
      document.removeEventListener('keydown', this.domKeydown)
      // document.removeEventListener('mousedown', this.mousedownFun)
      if (imgBox) {
        imgBox.removeEventListener('scroll', this.boxScroll)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "./../../../assets/common.styl"
  .image
    padding: 25px 8px 8px 8px;
    position: absolute;
    left: 28%;
    top: 0;
    z-index: 2002;
    background: #e6e6e6;
    border-radius 5px
    .actionIcon
      position: absolute;
      top: 3px;
      cursor: pointer;
      z-index 2
      i
        font-size 16px
      &:hover
        color $c-main
    .closeimg
      right: 10px;
    .minimg
      right: 40px;
    .maximg
      right: 40px;
    .rotate
      right 70px;
      font-weight 600;
    .ReplaydragbarImage
      width: calc(100% - 6px);
      height: 20%;
      min-height: 100px;
      opacity: 0;
      position: absolute;
      background-color: $cf-white;
      cursor: move;
      top: 0;
      z-index 1;
  .imgBox
    max-width: 700px;
    max-height calc(100vh - 100px)
    overflow auto
    font-size 0px
    position relative
    img
      max-width 100%
  .turnLeft, .turnRight
    display block
    cursor pointer
    position absolute
    width 31px
    height 56px
    top 0
    bottom 0
    border-radius 12px 0px 0px 12px
    line-height 56px
    text-align center
    margin: auto
    background #000000
    opacity: 0.6
    color #fff
  .turnRight
    border-radius 0px 12px 12px 0px
    i
      font-size 18px
  .turnLeft
    left -40px
  .turnRight
    right -40px
  .disable
    background  $cf-level4
  .arrow
    width calc(50% - 6px)
    z-index: 2
    position: absolute;
  #rightArrow
    cursor url("../../../assets/img/rightArrow.cur"), auto
    right 30px
  #leftArrow
    cursor url("../../../assets/img/leftArrow.cur"), auto
</style>
